<template>
  <div class="home">
    <div class="hvr-icon-wobble-vertical">123</div>
        <div class="element">1212</div>
        <div v-mojs="mojsOptions">Burst Element</div>
  </div>
</template>

<script>


export default {
  data(){
    return{
mojsOptions : {
            count : 1,
            radius: { 100: 100 },
            origin: '100% 100%',
            degree: 360,
            children: {
              shape: 'polygon',
              fill: ['black','white'],
              isSwirl:true,
              swirlSize: 100,
              swirlFrequency: 2,
              delay: 'stagger(0, 130)'
            }
          }
    }
  },
  mounted(){
//     this.$anime.Shape({
//   shape: 'circle',
//   stroke: 'cyan', // 画笔颜色
//   fill: 'none', // 不填充
//   isShowStart: true
// })
// let rect = new mojs.Shape({
//   shape: 'rect', // 定义形状为矩形
//   isShowStart: true // 定义初始化之后就显示
// })


// $(".element").velocity({
  
//    translateX: "200px",
//     rotateZ: "45deg"
// }, {
//     duration: 450,
//     delay: 1000
// });
let rect = new mojs.Shape({
  shape: 'rect',
  fill: 'none',
  stroke: 'cyan',
  radius: 10,
  strokeWidth: 20, // 画笔宽度
  angle: {
    [-180]: 0 // 使用对象的形式设置，key为开始值，val为结束值（任何属性都可以设置过渡）
  },
// duration: 400 // 默认为300ms
}).play()
  }
}
</script>
<style lang="less" scoped>
.element{
  position: absolute
}
</style>

